<template>
<div class="box">
<div class="header">
<van-nav-bar title="分类" left-text="返回" right-text='' left-arrow>
  <p slot="title" size='18'><span class="span-1">分类</span><span class="span-2">品牌</span></p>
  <van-icon name="search" slot="right" size='18' />
</van-nav-bar>
</div>
<div class="content">
  <van-sidebar class="van-sidebar" v-model="activeKey" @change="onChange">
    <van-sidebar-item v-for="(item,index) of typelist" :key="index" :title="item" />
  </van-sidebar>
<div class="branlist">
<van-row>
  <van-col class='col' span="8" v-for="(item,index) of brand" :key="index"><div @click="tolist(item.brand)">
      <img class='brandlog' :src="item.brandimg" alt="">
      <div>{{item.brand}}</div>
    </div>
  </van-col>
</van-row>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Icon, Sidebar, SidebarItem, Col, Row, Notify } from 'vant'
import { getCartgory, getCartgoryBrand } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Sidebar)
Vue.use(Col)
Vue.use(Row)
Vue.use(SidebarItem)
Vue.use(Notify)
export default {
  data () {
    return {
      activeKey: 0,
      typelist: [],
      brand: []
    }
  },
  mounted () {
    getCartgory().then(res => {
      this.typelist = res.data.data
      this.onChange(0)
    })
  },
  methods: {
    onChange (index) {
      getCartgoryBrand({
        type: this.typelist[index]
      }).then(res => {
        console.log(res.data.data)
        this.brand = res.data.data
      })
    },
    tolist (brand) {
      this.$router.push('/pro?' + 'type=' + this.typelist[this.activeKey] + '&brand=' + brand)
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.box{
  // @include flexbox();
}
.header{
  .span-1{
    padding-right:10px;
    font-size: 10px;
  }
  .span-2{
    padding-right:10px;
    font-size: 10px;
  }
}
.content{
  .branlist{
    float: left;
    width: 76%;
    line-height: 60px;
  }
  .van-sidebar{
    float:left;
    height: 100%;
  }
  .col{
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    @include flexbox();
    @include justify-content(center);
    @include align-content(center);
    .brandlog{
      width:70%
    }
  }
}
</style>
